<template>
    <div class="sorter">
        <slot></slot>
        <div class="sorter-carets">
            <van-icon class="sorter-caret-up" :class="{'sorter-caret-active' : order === 'ascend'}" name="play"/>
            <van-icon class="sorter-caret-down" :class="{'sorter-caret-active' : order === 'descend'}" name="play"/>
        </div>
    </div>
</template>

<script>
  import { Icon } from "vant"

  export default {
    name: "Sorter",
    components: {
      [Icon.name]: Icon,
    },
    props: {
      order: String,
    },
  }
</script>

<style lang="scss" scoped>

    .sorter {
        display: inline-flex;
        align-items: center;
    }

    .sorter-carets {
        display: inline-flex;
        flex-direction: column;
        margin-left: 4px;

        .sorter-caret-up {
            font-size: 8px;
            transform: rotate(-90deg);
            color: initial;
        }

        .sorter-caret-down {
            transform: rotate(90deg);
            font-size: 8px;
            color: initial;
        }

        .sorter-caret-active {
            color: inherit;
        }
    }
</style>
